<template>
  <van-notice-bar scrollable :text="showText" />
  <div id="header"> <img src="../../assets/唐老鸭-login.jpg"></div>
  <van-form @submit="onSubmit">
    <van-cell-group inset>
      <van-field
          v-model="loginAccount"
          name="loginAccount"
          label="账号"
          placeholder="请输入账号"
          :rules="[{ required: true, message: '请填写用户名' }]"
      />
      <van-field
          v-model="loginPassword"
          type="password"
          name="userPassword"
          label="密码"
          placeholder="请输入密码"
          :rules="[{ required: true, message: '请填写密码' }]"
      />
    </van-cell-group>
    <div style="margin: 16px;">
      <van-button round block type="primary" native-type="submit">
        登录
      </van-button>
      <div style="margin-top: 16px;">
        <van-button round block type="info" @click="() => router.push('/user/register')">
          注册
        </van-button>
      </div>
    </div>
  </van-form>
</template>

<script setup lang="ts">
import {useRoute, useRouter} from "vue-router";
import {ref} from "vue";
import myAxios from "../../api/myAxios";
import {Toast} from "vant";

const router = useRouter();
const route = useRoute();

const loginAccount = ref('');
const loginPassword = ref('');
const showText = ref('唐老鸭欢迎老用户回家~~~');

const onSubmit = async () => {
  const res = await myAxios.post('/user/login', {
    loginAccount: loginAccount.value,
    loginPassword: loginPassword.value,
  })
  console.log(res, '用户登录');
  if (res.code === 0 && res.data) {
    Toast.success('登录成功');
    // 跳转到之前的页面
    const redirectUrl = route.query?.redirect as string ?? '/';
    window.location.href = redirectUrl;
  } else {
    Toast.fail('登录失败'+(res.description ? `，${res.description}` : ''));
  }
};

</script>

<style scoped>
#header{
  text-align: center;
}
#header img{
  height: 330px;
  width: 330px;
}
</style>
